<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>借阅图书页面</title>
    <link rel="stylesheet" th:href="@{/css/pintuer.css}">
    <link rel="stylesheet" th:href="@{/css/admin.css}">
    <script th:src="@{/js/jquery.js}"></script>
    <script th:src="@{/js/pintuer.js}"></script>
    <style>
        .table td{
            padding: 14px;
        }
    </style>
</head>
<body>
<form method="post" th:action="@{/book/findPages}" id="form">
    <input type="hidden" name="page" value="1"/>
    <div class="panel admin-panel">
        <div class="panel-head"><strong class="icon-reorder"> 借阅图书列表</strong>
        </div>
        <div class="padding border-bottom">
            <ul class="search" style="padding-left:10px;">
<!--                <li th:if="${session.account.role} == '管理员'"><a class="button border-main icon-plus-square-o" th:href="@{/book/input}"> 添加</a></li>-->
<!--                <li th:if="${session.account.role} == '管理员'"><a class="button icon-trash-o  border-red" onclick="deletes()"> 批量删除</a></li>-->
                <li>搜索：</li>
                <li>
                    <form th:action="@{/static}">
                        <input type="text" placeholder="请输入图书名称" name="title" class="input"
                               style="width:250px; line-height:17px;display:inline-block"/>
                        <button class="button border-main icon-search" id="searchBtn"> 搜索</button>
                    </form>
                </li>
            </ul>
        </div>
        <table class="table table-hover text-center">
            <thead>
            <tr>
                <th width="50"><input type="checkbox" id="checkAll"></th>
<!--                <th width="50">序号</th>-->
                <th>借阅编号</th>
                <th>读者账户</th>
                <th>读者昵称</th>
                <th>图书编号</th>
<!--                <th>书号</th>-->
                <th>借书日期</th>
                <th>是否已归还</th>
                <th>归还时间</th>
                <th>操作</th>
            </tr>
            </thead>

            <tbody>
            <tr th:each="item,i : ${page.list}" >
                <td><input type="checkbox" name="ids" th:value="${item.borrowID}"></td>
<!--                <td width="100" th:text="${i.count}">序号</td>-->
                <td th:text="${item.borrowID}" >借阅编号</td>
                <td th:text="${item.username}">读者账户</td>
                <td th:text="${item.name}">读者昵称</td>
                <td th:text="${item.bookID}">图书编号</td>
<!--                <td th:text="${item.ISBN}">书号</td>-->
                <td th:text="${item.borrowDate}">借书日期</td>
                <td th:text="${item.returnedStatus}">是否已归还</td>
                <td th:text="${item.ruturnDate}">归还日期</td>
                <td th:if="${session.account.role} == '管理员'">
                    <div class="button-group"><a class="button border-main" th:href="@{/book/borrowGet(borrowID=${item.borrowID})}">
                        <span class="icon-edit"></span> 修改</a>
                        <a class="button border-red" th:href="@{/book/deleteBorrow(borrowID=${item.borrowID})}">
                            <span class="icon-trash-o"></span> 删除</a>
                    </div>
                </td>
                <td th:if="${session.account.role} == '读者'">
                    <div class="button-group">
<!--                        <a class="button border-main" th:href="@{#}">-->
<!--                        <span class="icon-edit"></span> 借阅</a>-->
                        <a class="button border-red" th:href="@{#}">
                            <span class="icon-trash-o"></span> 归还</a>
                        <a class="button border-red" th:href="@{#}">
                            <span class="icon-trash-o"></span> 购买</a>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>

    </div>
</form>
<br>
<div th:insert="page :: page"></div>

<script type="text/javascript">
    /**
     * jQuery语句
     */
    $(document).ready(function () {
        $("#checkAll").bind('click', function () {
            $("input[name='ids']").prop("checked", function (i, val) {
                return !val;
            });
            $("#searchBtn").bind("click", function () {
                $("#form").attr("action", "findPage");
                $("#form").submit();
            })
        })
    });


    /*
     * 批量删除
     */
    function deletes() {
        let size = 0;
        $("input[name='ids']").each(function (i, domEle) {
            if ($(domEle).prop("checked")) {
                size++;
            }
        })
        if (size == 0) {
            alert("请勾选要删除的记录");
            return false;
        } else {
            $("#form").attr("action", "delete");
        }

    }
</script>

</body>

</html>